<template>
  <div class="root-resource">
    <div class="findArea">
      <ul>
        <li>
          <label>名称：</label>
          <el-input v-model="queryParams.engineName" placeholder="请输入关键字" clearable></el-input>
        </li>
        <li>
          <label>类型：</label>
          <el-select v-model="queryParams.engineType" placeholder="请选择主机类型" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </li>
        <li>
          <el-button type="primary" @click="handleSearch" v-hasPermi="['bigdata:resource:list']">
            <svg-icon class="menu-icon font-14" icon-class="resource_search"></svg-icon>
            搜索
          </el-button>
        </li>
      </ul>
      <div class="btnArea">
        <el-button :disabled="!checkedRowsId.length" :loading="batchDelLoading" @click="handleBatchDel"
          v-hasPermi="['bigdata:resource:remove']">
          <svg-icon class="menu-icon font-14" icon-class="resource_del"></svg-icon>
          删除
        </el-button>
        <el-button type="primary" @click="handleAdd" v-hasPermi="['bigdata:resource:add']">
          <svg-icon class="menu-icon font-14" icon-class="resource_add"></svg-icon>
          添加主机
        </el-button>
      </div>
    </div>
    <div ref="tableAreaRef" class="contentArea">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" v-loading="tableLoading" :height="tableHeight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="engineName" label="主机名称"></el-table-column>
        <el-table-column prop="engineAddress" label="主机地址"></el-table-column>
        <el-table-column prop="engineCpu" label="CPU"></el-table-column>
        <el-table-column prop="engineMemory" label="内存"></el-table-column>
        <el-table-column prop="engineDisk" label="磁盘"></el-table-column>
        <el-table-column prop="engineType" label="主机类型">
          <template slot-scope="scope">
            {{ handleEngineType(scope.row.engineType) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="enginePort" label="端口号"></el-table-column> -->
        <el-table-column prop="updatedTime" label="更新时间"></el-table-column>
        <!-- <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div
              class="status"
              :class="[scope.row.status ? 'normal' : 'abnormal']"
            >
              <span class="dot"></span>
              <span class="text">
                {{ scope.row.status == 2 ? '正常' : '异常' }}
              </span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button type="text" class="edit" @click="handleRowEdit(scope.row)"
              v-hasPermi="['bigdata:resource:edit']">
              编辑
            </el-button>
            <el-button type="text" class="del" @click="handleRowDel(scope.row)"
              v-hasPermi="['bigdata:resource:remove']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="footer" v-if="tableData.length">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagination.pageNo" :page-sizes="[50, 100, 150, 200]" :page-size="pagination.pageSize"
        layout=" prev, pager, next,sizes" :total="0"></el-pagination>
    </div> -->
    <Pagination :totalSize="totalSize" :page.sync="pageInfo.pageNo" :limit.sync="pageInfo.pageSize"
      @getList="requestList" />
    <addOrEdit v-if="popup.show" :mode="popup.mode" :data="popup.data" @success="handleSearch"
      @closed="handlePopupClosed">
    </addOrEdit>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import addOrEdit from './addOrEdit.vue'
import { ENGINE_TYPE } from './data'
export default {
  name: 'resource',
  components: {
    addOrEdit,
    Pagination
  },
  data() {
    return {
      queryParams: {
        engineName: '',
        engineType: ''
      },
      tableHeight: 400,
      options: ENGINE_TYPE,
      tableData: [],
      tableLoading: false,
      totalSize: 0,
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
      },
      // pagination: {
      //   pageSize: 10,
      //   pageNo: 1
      // },
      // currentPage: 1,
      checkedRowsId: [],
      batchDelLoading: false,
      popup: {
        mode: 0,
        show: false
      }
    }
  },
  created() {
    this.requestList()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs.tableAreaRef.clientHeight
    })
  },
  methods: {
    ...mapActions({
      postEngineListOfPage: 'POST_ENGINE_LISTOFPAGE',
      deleteEngineBatchDelete: 'DELETE_ENGINE_BATCHDELETE',
      getEngineInfoId: 'GET_ENGINE_INFO_ID',
      putEngineInfoId: 'PUT_ENGINE_INFO_ID',
      deleteEngineInfoId: 'DELETE_ENGINE_INFO_ID'
    }),
    requestList() {
      const parmas = {
        ...this.queryParams,
        ...this.pageInfo
      }
      parmas.engineName === '' && delete parmas.engineName
      parmas.engineType === '' && delete parmas.engineType
      this.tableLoading = true
      this.postEngineListOfPage(parmas).then(res => {
        const { code, result } = res
        if (code == 100000) {
          const { records, total } = result
          // if (records?.length) {
          //   this.tableData = records
          // }
          this.tableData = records
          this.totalSize = total
          this.checkedRowsId = []
          this.tableLoading = false
        }
      })
    },
    handleSelectionChange(data) {
      this.checkedRowsId = data.map(item => item.id)
    },
    // handleSizeChange(num) {
    //   this.pagination.pageNo = 1
    //   this.pagination.pageSize = num
    //   this.requestList()
    // },
    // handleCurrentChange(num) {
    //   this.pagination.pageNo = num
    //   this.requestList()
    // },
    handleRowDel(row) {
      // 单个删除
      this.deleteEngineInfoId(row.id).then(res => {
        const { code } = res
        if (code === 100000) {
          this.checkedRowsId = []
          this.handleSearch()
          this.$message.warning('删除成功~')
        }
        this.batchDelLoading = false
      })
    },
    handleBatchDel() {
      // 批量删除
      if (this.checkedRowsId.length) {
        this.batchDelLoading = true
        this.deleteEngineBatchDelete([...this.checkedRowsId]).then(res => {
          const { code } = res
          if (code === 100000) {
            this.checkedRowsId = []
            this.handleSearch()
            this.$message.warning('删除成功~')
          }
          this.batchDelLoading = false
        })
      } else {
        this.$message.warning('请先勾选数据~')
      }
    },
    handleSearch() {
      this.pageInfo.pageNo = 1
      this.requestList()
    },
    // handleSuccess() {
    //   this.pagination.pageNo = 1
    //   this.requestList()
    // },
    handleAdd() {
      this.popup.show = true
      this.popup.mode = 0
    },
    handlePopupClosed() {
      this.popup.show = false
    },
    handleRowEdit(row) {
      this.popup.show = true
      this.popup.mode = 1
      this.popup.data = row
      console.log(row)
    },
    handleEngineType(value) {
      const findItem = ENGINE_TYPE.find(item => item.value === value)
      if (findItem) {
        return findItem.label
      } else {
        return value
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.root-resource {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.findArea {
  display: flex;
  justify-content: space-between;
  background-color: $--color-nav;
  padding: 4px 12px;
  margin-bottom: 5px;

  ul {
    display: flex;
    align-items: center;

    li {
      display: flex;
      align-items: center;
      margin-right: 10px;

      label {
        white-space: nowrap;
        color: $--mian-color;
      }
    }
  }
}

.contentArea {
  flex: 1;
  overflow: hidden;

  .status {
    display: flex;
    justify-content: start;
    align-items: center;

    &.normal {
      .dot {
        background-color: #00b929;
        margin-right: 8px;
      }
    }

    &.abnormal {
      .dot {
        background-color: #c73234;
        margin-right: 8px;
      }
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }

  .del {
    color: #c73234;
    margin-left: 20px;
  }

  .del,
  .edit {
    padding: 0;
  }
}

.footer {
  background-color: $--color-nav;
  padding: 8px 0;
  text-align: center;
}
</style>
